<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>角色管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link media="all" rel="stylesheet" th:href="@{/static/layuiadmin/layui/css/layui.css}">
    <link media="all" rel="stylesheet" th:href="@{/static/layuiadmin/style/admin.css}">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md7">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card layui-form">
                        <div class="layui-card-header layuiadmin-card-header-auto">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <input type="text" name="roleName" placeholder="角色名称" autocomplete="off"
                                           class="layui-input">
                                </div>
                                <div class="layui-inline">
                                    <button class="layui-btn" lay-submit lay-filter="search">搜索</button>
                                </div>
                            </div>
                        </div>
                        <div class="layui-card-body">
                            <table id="item-list" lay-filter="item-list"></table>
                            <script type="text/html" id="item-bar">
                                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">
                                    <i class="layui-icon layui-icon-file-b"></i>详情</a>
                                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">
                                    <i class="layui-icon layui-icon-edit"></i>编辑</a>
                                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
                                    <i class="layui-icon layui-icon-delete"></i>删除</a>
                            </script>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md5">
            <div class="layui-card">
                <div class="layui-card-header">新增</div>
                <div class="layui-card-body layui-form">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">角色名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="roleName" placeholder="请输入" 角色名称 autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">角色描述</label>
                        <div class="layui-input-block">
                            <textarea name="remark" placeholder="" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">角色权限</label>
                        <div class="layui-input-block">
                            <div id="menuList" lay-filter="menuList"></div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="submit-btn">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary" cus_event="reset">重置</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script th:src="@{/static/layuiadmin/layui/layui.js}"></script>
<script th:src="@{/static/bm/js/common.js}"></script>
<script>
    layui.config({
        base: contextPath + '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'table', 'tree', 'util'], function () {
        var $ = layui.$
            , form = layui.form
            , util = layui.util
            , tree = layui.tree
            , table = layui.table;

        //监听搜索
        form.on('submit(search)', function (data) {
            table.reload('item-list', {
                where: data.field
            });
        });


        table.render({
            elem: '#item-list'
            , url: contextPath + '/sys/role/list'
            , page: true
            , toolbar: false
            , limit: 10 //默认十条数据一页
            , limits: [10, 20, 30, 50] //数据分页条
            , cols: [
                [ //表头
                    {field: 'id', title: 'ID', align: 'center', hide: true},
                    {field: 'roleName', title: '角色名称', align: 'center'},
                    {field: 'remark', title: '角色描述', align: 'center'},
                    {
                        field: 'createTime', align: 'center', title: '创建时间', hide: true, templet: function (d) {
                            return util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss")
                        }
                    },
                    {title: '操作', align: 'center', toolbar: '#item-bar'}
                ]
            ]
        });

        //监听行工具事件
        table.on('tool(item-list)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                layer.open({
                    type: 2,
                    title: '详情',
                    maxmin: true,
                    area: ["40%", "70%"],
                    content: contextPath + '/sys/role/detailPage?id=' + data.id,
                    shade: 0.3,
                });
            }else if (obj.event === 'edit') {
                layer.open({
                    type: 2,
                    title: '编辑',
                    maxmin: true,
                    area: ["40%", "70%"],
                    content: contextPath + '/sys/role/editPage?id=' + data.id,
                    shade: 0.3,
                    btn: ['确认', '取消'],
                    yes: function (index, layero) {
                        //点击确认触发 iframe 内容中的按钮提交
                        var submit = layero.find('iframe').contents().find("#submit-btn");
                        submit.click();
                    }
                });
            } else if (obj.event === 'del') {
                layer.confirm('确认删除吗？', function () {
                    var loading = layer.load();
                    $.post(contextPath + '/sys/role/del', data, function (ev) {
                        layer.close(loading);
                        if (ev.code === '0000') {
                            layer.msg(ev.msg, {
                                icon: 6, shade: 0.3, time: 1000,
                                end: function () {
                                    table.reload('item-list'); //重载表格
                                }
                            });
                        } else {
                            layer.msg(ev.msg);
                        }
                    }, 'json');

                });
            }
        });

        //按钮事件
        util.event('cus_event', {
            reset: function (data) {
                $(":input").val("");
                reloadMenu({'status': '1'});
            }
        });

        //---------------------------right area-----------------------//
        //树形菜单
        tree.render({
            elem: '#menuList'  //绑定元素
            , id: 'menuTreeList'  //绑定元素
            , showCheckbox: true
            , onlyIconControl: false
            , accordion: true
            , data: []
        });

        //重载
        window.reloadMenu = function (obj) {
            $.post(contextPath + '/sys/menu/list', obj, function (ev) {
                if (ev.code === '0000') {
                    tree.reload('menuTreeList', {
                        data: ev.data
                    });
                } else {
                    layer.msg(ev.msg);
                }
            });
        };
        reloadMenu({'status': '1'});


        form.on('submit(submit-btn)', function (data) {
            //获取选中节点的数据
            data.field.checkedData = JSON.stringify(tree.getChecked('menuTreeList'));
            layer.confirm('确认提交吗？', function () {
                var loading = layer.load();
                $.post(contextPath + '/sys/role/add', data.field, function (ev) {
                    layer.close(loading);
                    if (ev.code === '0000') {
                        layer.msg(ev.msg, {
                            icon: 6, shade: 0.3, time: 1000,
                            end: function () {
                                table.reload('item-list'); //重载表格
                            }
                        });
                    } else {
                        layer.msg(ev.msg);
                    }
                }, 'json');

            });
        });

    });
</script>
</body>
</html>
